<template>
  <h1>父组件收集到数据{{ bl }}</h1>
  <!-- 
    双向绑定：
      1. 父组件把值传递给子组件
      2. 子组件修改数据的时候，父组件数据能更新
  -->
  <!-- 常用：v-model 语法糖实现双向绑定（一种简写方式） -->
  <Son v-model="bl"></Son>
  <!-- 了解：简化前写法如下 -->
  <Son :modelValue="bl" @update:modelValue="modelValueFn"></Son>
  <!-- 了解：简化前写法如下 -->
  <Son :modelValue="bl" @update:modelValue="bl = $event"></Son>
</template>

<script>
import { ref } from 'vue'
/* 
  目标：
*/
import Son from './components/Son17.vue'
export default {
  name: 'App',
  components: { Son },
  setup() {
    const bl = ref(false)
    // PS：val 其实事件处理函数的事件对象，在模板中可通过 $event 获取到子组件传过来的数据
    const modelValueFn = val => {
      bl.value = val
    }
    return { bl, modelValueFn }
  },
}
</script>

<style>

</style>